<template>
  <div class="fileManage" >
    <BaseForm :formItemCfg="formItemCfg" :queryData="queryData" :labelWidth="'100px'" :parentComponentId="componentId"/>
    <el-button type="primary" size="mini" style="margin-bottom: 5px" @click.stop="open('新增')">新增</el-button>
    <BaseList :listApi="$api.attConfiguration.list"  :queryData="queryData" :column="column" :parentComponentId="componentId">
      <template  v-slot:operate="slotProps">
        <el-button type="text" @click.stop="open('编辑',slotProps.row)">编辑</el-button>
        <el-button type="text" @click.stop="deleteAtt(slotProps.row.attConfigurationId)">删除</el-button>
      </template>
    </BaseList>
    <!--4.编辑窗口-->
    <base-save :saveApi="$api.attConfiguration.save"   :saveCfgArr="saveCfgArr" :parentComponentId="componentId" :saveRules="saveRules">
    </base-save>

  </div>
</template>

<script>
export default {
  name: 'fileManage',
  props: {},
  data() {
    return {
      componentId:'fileManage',
      formItemCfg:[],
      treeData:[],
      queryData:{module:'', name:'', code: "",pageNumber: 1,   pageSize: 10},
      cascadeProps:{value: "menuName", label: "menuName", children: "children", emitPath:false, checkStrictly: true},
      column:[
        {label:'模块',width:'200',name:'module'},
        {label:'附件配置名称',width:'200',name:'name'},
        {label:'附件配置编码',width:'200',name:'code'},
        {label:'允许文件格式',width:'200',name:'allowedFileType'},
        {label:'最大数量',width:'200',name:'maxNumber'},
        {label:'单文件大小限制（MB）',width:'200',name:'singleAttchMaxSize'},
      ],
      saveCfgArr:[],
      saveDialog:false,
      // 编辑框数据
      saveData: {
                  module : '', name: '', code:'', allowedFileType:'png', maxNumber: '', singleAttchMaxSize: ''
                },
      saveRules: {
        module: [
          { required: true, message: '请选择模块', trigger: 'blur' }
        ],
      },
      // 字典状态类型下拉选择
      typeList: [{value: '1', label: '启用'},
        {value: '0', label: '禁用'}
      ],
    }
  },
  mounted(){
     this. initFormItemCfg()
  },
  methods: {
    //树
    async initFormItemCfg(){
      await this.$api.menu.tree({type:'0'}).then(resp => {
        this.treeData=resp;
      })
      this.formItemCfg=  [
        [
          {name:"module",label:'模块名称',type:'cascader',placeholder:'请选择模块',other:{treeData: this.treeData,cascadeProps:this.cascadeProps}},
          {name:"name",label:'附件配置名称',type:'input',placeholder:'请输入附件配置名称'}
        ],
        [
          {name:"code",label:'附件配置编码',type:'input',placeholder:'请输入附件配置编码'},
          {}
        ],
      ];
      this.saveCfgArr=[
        {name:"module",label:'模块名称',type:'cascader',placeholder:'请选择模块',other:{treeData: this.treeData,cascadeProps:this.cascadeProps}},
        {name:"name",label:'附件配置名称',type:'input',placeholder:'请输入附件配置名称'},
        {name:"code",label:'附件配置编码',type:'input',placeholder:'请输入附件配置编码'},
        {name:"allowedFileType",label:'允许文件格式',type:'select2',placeholder:'请输入允许文件格式',other:{selectData: this.$config.fileTypes}},
        {name:"maxNumber",label:'最大数量',type:'inputNumber',placeholder:'请输入附件配置名称',other:{remark:'个'}},
        {name:"singleAttchMaxSize",label:'单文件大小限制',type:'inputNumber',placeholder:'请输入允许文件格式',other:{remark:'MB'}},
      ]
    },
    open(type,data){

      if(data===undefined){
        data=this.saveData
      }
      data=JSON.parse(JSON.stringify(data))
      data.allowedFileType=data.allowedFileType.split(',')
      this.$bus.$emit('baseSaveOpen',data)
    },
    deleteAtt(id){
      this.$api.attConfiguration.delete({attConfigurationId:id})
      this.$bus.$emit(this.componentId+'dataList')
    }
  },
  watch: {

  },

}
</script>

<style scoped >
  .fileManage {
    padding: 20px;
  }
</style>
